<template>
  <div class="dialog-tip">
    <el-button type="primary" plain size="small" style="width:100%" @click="addDialog">
      <fa-icon class="fa-plus" />新增启动弹框</el-button>
    <el-row class="table-top">
      <el-table :data="dataList" v-loading="tableLoading" tooltip-effect="light" class="tc-table" size="small">
        <el-table-column type="index" width="55" fixed="left" label="序号"></el-table-column>
        <template v-for="(column, index) in DIALOG_HEAD_LIST">
          <el-table-column :prop="column.prop" :label="column.label" :key="index" :width="column.width" :show-overflow-tooltip="true" />
        </template>
        <el-table-column prop="operation" class-name="oper-col" label="操作" :width="320">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.status==='1'" plain @click="openDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.status==='0'" plain @click="editRow(scope.row)">编辑</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.status==='1'" plain @click="losedRow(scope.row)">失效</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.status==='0'" plain @click="takeEffect(scope.row)">生效</el-button>
            <el-button size="mini" type="primary" plain @click="placedTop(scope.row)">置顶</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.status==='0'" plain @click="delRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <el-dialog title="编辑弹窗提示" :visible.sync="editDialog" width="30%" :close-on-click-modal="false">
      <config-form v-if="editDialog" :initData="editData" :options="DIALOG_FORM" @uppdataSuccess="uppdataSuccess" />
    </el-dialog>
    <el-dialog title="弹窗提示详情" :visible.sync="detatilDialog" width="30%" :close-on-click-modal="false">
      <config-form v-if="detatilDialog" :initData="editData" :options="DIALOG_DETAIL_FORM" />
    </el-dialog>
  </div>
</template>

<script>
import { DIALOG_HEAD_LIST, DIALOG_FORM, DIALOG_DETAIL_FORM } from '../js/contant.js'
import { common } from '@/utils/common'
import { CONSTANT_OBJ } from '@/utils/constant'
import api from '../api'
export default {
  data () {
    return {
      DIALOG_HEAD_LIST,
      DIALOG_DETAIL_FORM,
      DIALOG_FORM,
      tableLoading: false,
      editDialog: false,
      detatilDialog: false,
      editData: {},
      dataForm: {
        pageNum: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表数据
    getList (val) {
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      api.postQueryDialogData(this.dataForm).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.dataList = data.list || []
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 新增
    addDialog () {
      this.editData = {}
      this.editDialog = true
    },
    // 编辑
    editRow (row) {
      const { id, dialogTitle, dialogDesc, dialogContent, effectiveTime, dialogTimes, receive } = row
      this.editData = { id, dialogTitle, dialogDesc, dialogContent, effectiveTime, dialogTimes, receive }
      this.editDialog = true
    },
    // 查看详情
    openDetail (row) {
      const { id, dialogTitle, dialogDesc, dialogContent, effectiveTime, dialogTimes, receive } = row
      this.editData = { id, dialogTitle, dialogDesc, dialogContent, effectiveTime, dialogTimes, receive }
      this.detatilDialog = true
    },
    // 失效
    losedRow (row) {
      common.confirmFn('失效状态的弹窗提示将不会弹出', '是否确定将此弹窗提示状态置为失效').then(res => {
        if (res) {
          api.postCloseDialogTipData({ id: row.id }).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    // 生效
    takeEffect (row) {
      common.confirmFn('生效后已触发弹窗的记录会清除，所有人均再次看到弹窗', '是否确定将此弹窗提示状态置为生效').then(res => {
        if (res) {
          api.postOpenDialogTipData({ id: row.id }).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    // 置顶
    placedTop (row) {
      common.confirmFn('排序靠顶的弹窗将会优先弹出', '是否确定将此弹窗提示置顶').then(res => {
        if (res) {
          api.postTopDialogTipData({ id: row.id }).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    // 删除
    delRow (row) {
      common.confirmFn('是否确定删除此弹窗提示').then(res => {
        if (res) {
          api.deleteDialogData(row.id).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    successFn (res, dialog) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        if (dialog) {
          this[dialog] = false
        }
        this.getList(1)
      }
    },
    // 关闭弹框
    uppdataSuccess (data) {
      // 当id存在时调用编辑接口，否则调用新增接口
      let apiTip = data.id ? 'putEditDialogTipData' : 'postAddDialogTipData'
      api[apiTip](data).then(res => {
        this.successFn(res, 'editDialog')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-tip {
  .table-top {
    margin-top: 20px;
  }
}
</style>
